<template>
<div>
	<headTop></headTop>
<section class="data_section" ref="data_section"> 
		<div class="speed-work">
            <div
                class="box-card"
                v-for="(item, index) in girdData"
                :key="index"
                id="girdChild"
                :style="{ backgroundColor: item.bgcolor }"
            >
                <img src="../../assets/img/w_order.png" alt="" />
                <div class="box-text">{{ item.name }}</div>
            </div>
        </div>
			
			
		</section>
</div>
		
</template>

<script>
	// import echarts from 'echarts';
	// import salesTable from "./components/salesTable";  // 销售数据表格
	// import commentList from "./components/commentList";  // 用户评论列表
	// import cardList from "./components/cardList";  // card列表
	// import barChart from 'cps/echarts/barChart' // 用户投资类型 柱状图
	// import pieChart from 'cps/echarts/pieChart' // 用户投资类型 饼状图
	// import radarChart from 'cps/echarts/radarChart' // 用户投资类型 雷达图
	// import lineChart from 'cps/echarts/lineChart' // 用户投资类型 折线图
	// import { github } from "@/utils/env";
	// import loglist from './components/logList';
	import headTop from '@/components/headTop'

    export default {
    	data(){
    		return {
				girdData: [],

    		}
    	},
    	components: {
		  //  salesTable,
		  //  commentList,
		  //  cardList,
		  //  barChart,
		  //  pieChart,
		  //  radarChart,
		  //  lineChart,
			// loglist,
			 headTop
		},	
		created(){
		},
    	mounted(){
				this.getGirdDatas()
		},
    	methods: {
				getGirdDatas() {
            this.girdData = [
                {
                    icon: "w_order.png",
                    name: "员工管理",
                    url: "/prodcut",
                    bgcolor: "#66cc66",
                },
                {
                    icon: "w_order.png",
                    name: "仓库管理",
                    url: "/prodcut",
                    bgcolor: "#1afa29",
                },
                {
                    icon: "w_order.png",
                    name: "发货管理",
                    url: "/prodcut",
                    bgcolor: "#00C3F3",
                },
                {
                    icon: "w_order.png",
                    name: "工作计划",
                    url: "/prodcut",
                    bgcolor: "#d4237a",
                },
                {
                    icon: "w_order.png",
                    name: "供应商",
                    url: "/prodcut",
                    bgcolor: "#1296db",
                },
                {
                    icon: "w_order.png",
                    name: "财务报表",
                    url: "/prodcut",
                    bgcolor: "#409EFF",
                },
            ];
        }
    	}
    }
</script>

<style lang="less" scoped>
	.data_section{
		margin: 20px;
		border-radius: 2px;
		.row_list{
			margin-bottom: 20px;
			.row_base{
				padding: 10px;
				box-sizing: border-box;
				background: #fff;
				border-radius: 6px;
				height: 120px;
			}
		}
		.order_list{
			.orderArea{
				width: 100%;
				height: 300px;
				background: #fff !important;
				border-radius: 6px;
				box-sizing: border-box;
				padding: 10px;
				padding-top: 40px;
				overflow: hidden;
			}
			.orderbarArea{
				height: 370px;
			}
		}
		.data_list{
			text-align: center;
			font-size: 14px;
            border-radius: 6px;
			padding: 10px;
			color:#fff;
			height: 80px;
			.leftItem{
				align-items: start;
				justify-content: space-between;
				text-align: left;
			}
			.rightItem{
				width:62px;
				display: flex;
				align-items: center;
				justify-content: center;
				.svg-icon{
					font-size: 30px;
				}
			}
		    .number{
				font-size: 22px;
				font-weight: bold;
				.perTitle{
					font-size: 13px;
   				    margin-left: 5px;
				}
			}
		}
		.pay{
			.leftItem{
				justify-content: space-around;
			}
		}
     
	}
  .speed-div {
    margin: 0;
    padding: 0;
    height: 100%;
    color: #fff;
}
.speed-work {

    height: 100px;
    display: flex;
    align-items: flex-start;
    background-color: #fff;
}
.product-left {

    display: flex;
    align-items: flex-start;
    background-color: #fff;
}
.box-card {
    width: 160px;
    height: 80px;
    background-color: #67c23a;
    margin: 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    img {
        width: 40px;
        height: 40px;
        margin: 10px;
    }
}
.product-left-box {
    margin: 10px;
    width: 100%;
    height: 100%;
}
.index-bottom {
    width: 50%;
    height: 300px;
    background-color: #fff;

}
.tool-box {
		width: 150px;
    height: 80px;
    background-color: #67c23a;
    margin: 10px;
    border-radius: 8px;
    display: inline-flex;
		align-items: center;
}
.box-text {
    font-size: 14pt;
    font-weight: bold;
    color: #fff;
}

.product-title {
    font-size: 13pt;
    color: #000;
    margin-top: 2px;
}
.card-content {
    margin: 10px;
    width: 100%;
}
.center-time {
    font-size: 20pt;
    color: #409eff;
    font-weight: bold;
}
.count-content {
    padding: 20px;
    margin: 10px;
    width: 80%;
    border-radius: 8px;
    background-color: #f5f5f5;
}
.submit-button {
    width: 100%;
}
</style>
